<template>
	<div class="container">
		<div class="cont">
			<div class="label">商品名称</div>
			<el-input v-model="form.product_name" clearable maxlength="30"/>
		</div>
		<div class="cont">
			<div class="label">商品描述</div>
			<el-input v-model="form.product_desc" clearable maxlength="30"/>
		</div>
		<div class="cont">
			<div class="label">商品图片</div>
			<div class="imgBox">
				<div v-for="(item,index) in form.product_imgs" :key="index" class="item" :class="{active:index==0}">
					<el-image :src="item" fit="cover"/>
                    <el-icon @click="deleteItem(index)" class="close"><CircleClose /></el-icon>
					<!-- <el-icons name="CircleCloseFilled" @click="deleteItem(index)" class="close"/> -->
					<div class="tag" @click="beMain(index)">{{index==0?'主图':'设为主图'}}</div>
				</div>
				<el-upload action="" :show-file-list="false" :before-upload="uploadFace" :limit="1" accept="image/*" v-if="form.product_imgs.length<5">
					<view class="item"><el-icon><Plus /></el-icon></view>
				</el-upload>
			</div>
		</div>
		<div class="cont">
			<div class="label">原价</div>
			<el-input v-model="form.origin_price" clearable maxlength="8"/>
		</div>
		<div class="cont">
			<div class="label">销售价</div>
			<el-input v-model="form.sale_price" clearable maxlength="8"/>
		</div>
		<div class="cont">
			<div class="label">商品详情</div>
			<div ref="editor" class="editor"></div>
		</div>
		<el-button type="primary" @click="save">保存</el-button>
	</div>
</template>

<script setup>
import {  ref,onMounted,reactive } from "vue";
import wangeditor from "wangeditor";
import { useRoute,useRouter} from 'vue-router'
import { getGoodDetail, saveGoodEdit,addGood } from '../../api/manager'
import { ElMessage } from "element-plus";
import config from '../../config'
import methods from '../../core/methods'
const route = useRoute()
const router = useRouter()

const product_id= ref('')
let editor = ref(null)
const form = reactive({
    product_name:'',
    product_desc:'',
    product_detail:'',
    origin_price:0,
    sale_price:0,
    product_image:'',
    product_imgs:[]
});
//删除图片
const deleteItem=(index)=>{
    form.product_imgs.splice(index,1)
}
//设为主图
const beMain = (e) =>{
    if(e>0){
        let tmp = form.product_imgs[e]
        form.product_imgs.splice(e,1)
		form.product_imgs.unshift(tmp)
    }
}
//上传图片
const uploadFace = (file) =>{
    methods.uploadImg(file)
    .then(res => {
        if(res.code == 200){
            form.product_imgs.push(res.data.path)
        }else{
            ElMessage.error(res.msg)
        }
    })
    return false //不会走到action自动上传
}

//保存编辑
const save = () => {
    form.product_detail = editor.txt.html()
    if(form.product_name == ''){
        ElMessage.error('商品名称必填')
    }else if(form.product_imgs.length == 0){
        ElMessage.error('请上传商品图片')
    }else{
        if(product_id.value > 0){
            saveGoodEdit({
                product_id:product_id.value,
                product_name:form.product_name,
                product_desc:form.product_desc,
                product_detail:form.product_detail,
                origin_price:form.origin_price,
                sale_price:form.sale_price,
                product_imgs:form.product_imgs
            }).then(res => {
                if(res.code == 200){
                    ElMessage.success(res.msg)
                    router.push('/goods/list')
                }else{
                    ElMessage.error(res.msg)
                }
            })
        }else{
            addGood({
                product_name:form.product_name,
                product_desc:form.product_desc,
                product_detail:form.product_detail,
                origin_price:form.origin_price,
                sale_price:form.sale_price,
                product_imgs:form.product_imgs
            }).then(res => {
                if(res.code == 200){
                    ElMessage.success(res.msg)
                    router.push('/goods/list')
                }else{
                    ElMessage.error(res.msg)
                }
            })
        }
    }
}
//初始化富文本編輯器
const initEidtor=(content)=>{
    editor = new wangeditor(editor.value)

    editor.config.menus = [
        // 'head', // 标题  
        // 'bold', // 粗体  
        // 'fontSize', // 字号  
        // 'fontName', // 字体  
        // 'italic', // 斜体  
        // 'underline', // 下划线  
        // 'strikeThrough', // 删除线  
        // 'foreColor', // 文字颜色  
        // 'backColor', // 背景颜色  
        // 'link', // 插入链接  
        // 'list', // 列表  
        // 'justify', // 对齐方式  
        // 'quote', // 引用  
        // 'emoticon', // 表情  
        'image', // 插入图片  
        // 'table', // 表格
        // 'video', // 插入视频  
        // 'code', // 插入代码  
        // 'undo', // 撤销  
        // 'redo', // 重复
        // 'fullscreen' // 全屏
    ]
    editor.config.zIndex = 1// 改变层级
    editor.config.uploadImgServer = config.baseApi+'/upload'// 填写配置服务器端地址  
    editor.config.uploadFileName = 'file' // 后端接受上传文件的参数名  
    editor.config.showLinkImg = false// 隐藏网络图片
    editor.config.uploadImgMaxLength = 1 // 限制一次最多上传 1 张图片 
    editor.config.uploadImgMaxSize = 0.5 * 1024 * 1024 // 将图片大小限制为 500kb
    editor.config.uploadImgHooks = {
        fail: (xhr, editor, result) => {   
            console.log('插入图片失败回调')
        },  
        success: (xhr, editor, result) => {  
            console.log('图片上传成功回调')
        },  
        timeout: (xhr, editor) => {   
            console.log('网络超时的回调')
        },  
        error: (xhr, editor) => {  
            console.log('图片上传错误的回调')
        },  
        customInsert: (insertImg, result, editor) => {  
            if(result.code==200){
                insertImg(result.data.path)  
            }else{
                ElMessage.error(result.msg)
            }
        } 
    }
    editor.create()
    if(content){
        editor.txt.html(content)
    }
}


onMounted(() => {
    // if(route.query.id){
    if(route.params.id){
        product_id.value = route.params.id
        getGoodDetail({ product_id:product_id.value })
        .then(res => {
            if(res.code == 200){
                form.product_name= res.data.product_name
                form.product_desc= res.data.product_desc
                form.product_detail= res.data.product_detail
                form.product_imgs= res.data.product_imgs
                form.origin_price= res.data.origin_price
                form.sale_price= res.data.sale_price
                initEidtor(res.data.product_detail)
            }else{
                ElMessage.error(res.msg)
            }
        })
    }else{
        initEidtor()
    }
})




</script>